<template>
  <div>
    <h3>HelloWorld</h3>
    <p>{{ name }}</p>
    <p>{{ myName }}</p>
    <button @click="fn1">点击</button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 声明 props
const props = defineProps({
  name: {
    type: String,
    required: true
  }
})

// 声明 emits
const emit = defineEmits(['abcd', 'efdl'])

const myName = computed(() => props.name + '~')

function fn1() {
  emit('abcd')
}

// 对外暴露
defineExpose({
  a: props.name,
  b: myName
})
</script>
